<template>
  <div class="detail ace">
    <Header_h class="Header_h" v-if="pc == 1"></Header_h>
    <Header class="Header" v-else />
    <NavItem class="NavItem" :class="type != 1 ? '' : ''" />
    <div class="Breadcrumbs" v-if="type != 1">
      <!-- <Breadcrumb /> -->
      <el-button size="mini" class="pubBtn3" style="margin-right: 20px" type="button" @click="$router.push(`${url}`)">
        <router-link :to="{ path: `${url}` }">返回</router-link>
      </el-button>
      <el-breadcrumb separator="-">
        <el-breadcrumb-item v-if="path == '/patentDetails'" :to="{ path: `/patent` }">我的专利管理</el-breadcrumb-item>
        <el-breadcrumb-item v-if="path == '/compdetail'" :to="{ path: `/competitor` }">监控竞争对手</el-breadcrumb-item>
        <el-breadcrumb-item v-if="path == '/cutDetails'" :to="{ path: `/cutting` }">产学情报研</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `${url}` }">专利列表</el-breadcrumb-item>
        <!-- <el-breadcrumb-item :to='{path:`${url}`}'>{{name}}</el-breadcrumb-item> -->
        <el-breadcrumb-item>专利详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-main :class="type != 1 ? 'main-top' : 'main-top'">
      <el-row type="flex" justify="space-between" class="title_pns">
        <el-col :xl="24" class="tio" v-if="data">
          <span class="v_span">{{ data.pns }}</span>
          <span class="v_span2">{{ data.tio }}</span>
        </el-col>
        <el-col :push="2" class="icon-tog mb" :xs="10">
          <i @click="show = true" class="iconfont icon-toggle"></i>
        </el-col>
        <el-col class="d_btn pc" style="text-align: right">
          <el-button
            @click="copy"
            :data-clipboard-text="record"
            id="express_info_right"
            icon="iconfont icon-fenxiang"
          >分享该专利</el-button>
          <el-button icon="iconfont icon-lanmuyeicon_pdfxiazai" @click="dow()">下载专利文件</el-button>
        </el-col>
      </el-row>
      <el-row v-if="data" class="infos" :gutter="10">
        <el-col :md="12">
          <div class="context">
            <p v-html="data.requirement" class></p>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <Service class="service" v-if="this.$route.meta.serve && type != 1" />
    <div v-show="show" class="transition-box mb">
      <transition name="el-fade-in">
        <div v-show="show" class="el-zoom-in-top">
          <p @click="show = false" class="close">
            <i class="iconfont icon-guanbi"></i>
          </p>
          <ul class="mb_nav_li">
            <li @click="show = false">
              <router-link to="/detail">摘要</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/power">权力要求</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/instructions">说明书</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/drawings">附图</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/fullText">全文</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/kindred">同族信息</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/law">法律信息</router-link>
            </li>
          </ul>
          <el-row class="mt_btn" style="margin: 0 10px">
            <el-button
              @click="copy"
              id="express_info_right"
              :data-clipboard-text="record"
              type="warning"
            >分享该专利</el-button>
            <el-button
              icon="iconfont icon-lanmuyeicon_pdfxiazai"
              @click="dow()"
              type="primary"
            >下载专利文件</el-button>
          </el-row>
        </div>
      </transition>
    </div>
    <rightMenu @moveTo="moveTo" />
    <QRCode v-if="QRCodeVisible" :text="record" :desc="data" :dialogVisible="QRCodeVisible" @val="val" />
  </div>
</template>

<script>
import { detail } from "@/api";
import Header from "@/components/Header";
import Header_h from "@/components/Header_h";
import Breadcrumb from "@/components/Breadcrumb";
import NavItem from "@/components/Navitem";
import rightMenu from "@/components/web/rightMenu";
import QRCode from "@/components/QRCode";
import { setShare } from "@/wechat";

import { VUE_APP_BASE_API, PAGE_BASE_URL } from "@/config";
import Service from "@/components/Service";
import "element-ui/lib/theme-chalk/base.css";
export default {
  components: {
       Header_h,
    Header,
    Breadcrumb,
    NavItem,
    Service,

    QRCode,
    rightMenu
  },
  data() {
    return {
      QRCodeVisible: false,
      activeName: "first",
      data: [],
      url: "",
      name: "",
      path: "",
      show: false,
      record: '',
      // record: `${PAGE_BASE_URL}/#/detail?pid=${sessionStorage.getItem("pid")}&pc=${sessionStorage.getItem("pc")}`,
      type: sessionStorage.getItem("type"),
      // pc: sessionStorage.getItem("pc"),
      pc: '',
    };
  },
  async mounted() {
    try {
      this.url = sessionStorage.getItem("url");
      this.name = sessionStorage.getItem("name");
      const pid = sessionStorage.getItem("pid");
      let pc
      if (this.$store.getters.token) {
        pc = 0
      }else {
        pc=1
      }
      this.record = PAGE_BASE_URL + '#/detail?pid=' + (this.pid ? this.pid : sessionStorage.getItem('pid')) + '&type=1&pc=' + pc

      this.data = await detail({ pid: pid, type: 2 });
      this.path = sessionStorage.getItem("path");
      const desc = `政务走访管理系统`;
      const title = `[顺企中心]${this.data.tio}-${this.data.ano}`;
      setTimeout(() => {
        setShare({
          title, // 分享标题
          desc,
        });
      }, 1000);
    } catch (e) {
      this.$message.error(e.message);
    }
  },
  methods: {
    moveTo() {
      window.scrollTo(0, 0);
    },
    val(val) {
      this.QRCodeVisible = val;
    },
    contactus(val) {
      this.dialogVisible = val;
    },
    async dow() {
      try {
        const pid = sessionStorage.getItem("pid");
        // const res = await download(pid)
        // console.log(`${VUE_APP_BASE_API}/v1/index/download2?pid=${pid}`);
        window.open(`${VUE_APP_BASE_API}/v1/index/download2?pid=${pid}`);
      } catch (e) {
        this.$message(e.message);
      }
    },
    copy() {
      this.show = false
      let clipboard = new this.clipboard("#express_info_right");
      let that = this;
      clipboard.on("success", function () {
        //
        that.QRCodeVisible = true;
        // console.log(that.QRCodeVisible);
        clipboard.destroy();
      });
      clipboard.on("error", function () {
        that.$message.error("复制失败");
      });
    },
  },
};
</script>


<style lang="less" scoped>
/deep/ .context p {
  line-height: 25px !important;
}
// .navitems {
//   top: 0 !important;
// }
.detail_large {
  margin-bottom: 44px;
}
.main-top {
  margin-top: 0;
}
.CN {
  font-size: 18px;
  font-weight: 400;
  color: rgba(42, 139, 45, 1);
  display: inline-block;
}
.title {
  font-size: 18px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  display: inline-block;
  margin-left: 20px;
}
.detail_info {
  display: flex;
  align-items: center;
  margin-bottom: 60px;
}
.detail_info_title {
  font-size: 14px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  margin: 20px 0;
}
.detail_info_last {
  font-size: 14px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  margin: 20px 64px;
}
.img-box {
  width: 188px;
  // height:237px;
  border: 1px solid rgba(230, 233, 240, 1);
  border-radius: 5px;
  text-align: center;
  .img {
    width: 133px;
    height: 193px;
    object-fit: cover;
    margin: 10px 0;
  }
}
.detail_info_first_box {
  display: flex;
  align-items: center;
  // margin-bottom: 60px;
}
.tips {
  font-size: 14px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  display: block;
  margin: 10px 0;
}
.detail_head_title {
  width: 143px;
}
.detail_info_patent {
  // height:50px;
  // margin:0 0 22px 0;
  margin-bottom: 20px;
  margin-left: 64px;
  width: 480px;
}
.detail_head_context {
  width: 143px;
  margin-bottom: 20px;
}

.v_span {
  font-size: 18px;
  font-weight: 400;
  color: rgba(42, 139, 45, 1);
}
.v_span2 {
  font-size: 18px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  padding-left: 20px;
}
.infos {
  margin-top: 37px;
}
.pc {
  display: block;
}
.mb {
  display: none;
}
@media (max-width: 750px) {
  .Breadcrumbs,
  .NavItem,
  .Header,
  .service {
    display: none;
  }
  .main-top {
    width: 100%;
    margin-left: 0 !important;
    padding-bottom: 0;
    top: 0;
  }
  .pc {
    display: none;
  }
  .mb {
    display: block;
  }
  .detail_info_title {
    margin: 15px 0;
  }
  .detail_info_last {
    margin: 15px 0;
  }
  .infos {
    margin: 10px 0 0 0;
  }
  .detail_info {
    margin-bottom: 30px;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    width: 100%;
  }
  .detail_info_first_box {
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
  }
  .detail_head_title {
    width: auto;
  }
  .img-box {
    width: 100%;
  }
  .abst__layout-row {
    flex-direction: column;
  }
  .mb_top {
    margin-top: 20px;
  }
  .mb_context {
    font-weight: bold;
    margin-bottom: 5px;
  }
  .v_span2 {
    padding-left: 0;
  }
  .tio {
    line-height: 1.3;
  }
  .icon-tog {
    text-align: center;
    display: inline-block;
    line-height: 46px;
  }

  .icon-toggle {
    font-size: 25px !important;
  }
  .title_pns {
    border-bottom: 1px solid #c8d0dc;
    padding-bottom: 10px;
  }
  .transition-box {
    position: fixed;
    right: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .el-zoom-in-top {
    position: fixed;
    width: 80%;
    height: 100%;
    margin: 0 auto;
    background-color: #fff;
    top: 0;
    right: 0;
    z-index: 10;
  }
  .mb_nav_li {
    margin: 30px auto;
  }
  .mb_nav_li li {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
  }

  .close {
    float: right;
    padding: 10px;
    .iconfont {
      font-size: 25px;
    }
  }
}
@media (max-width: 750px) {
  .v_span2 {
    display: block;
  }
  .mb_zy {
    margin-bottom: 10px !important;
  }
  .Breadcrumbs,
  .NavItem,
  .Header,
  .service {
    display: none;
  }
  .main-top {
    width: 100%;
    margin-left: 0 !important;
    padding-bottom: 0;
    top: 0;
  }
  .pc {
    display: none;
  }
  .mb {
    display: block;
  }
  .detail_info_title {
    margin: 15px 0;
  }
  .detail_info_last {
    margin: 15px 0;
  }
  .infos {
    margin: 10px 0 0 0;
  }
  .detail_info {
    margin-bottom: 30px;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    width: 100%;
  }
  .detail_info_first_box {
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
  }
  .detail_head_title {
    width: auto;
  }
  .img-box {
    width: 100%;
  }
  .abst__layout-row {
    flex-direction: column;
  }
  .mb_top {
    margin-top: 20px;
  }
  .mb_context {
    font-weight: bold;
    margin-bottom: 10px;
    width: 100% !important;
  }
  .v_span2 {
    padding-left: 0;
  }
  .tio {
    line-height: 1.3;
  }
  .icon-tog {
    text-align: center;
    display: inline-block;
    line-height: 46px;
  }

  .icon-toggle {
    font-size: 25px !important;
  }
  .title_pns {
    border-bottom: 1px solid #c8d0dc;
    padding-bottom: 10px;
  }
  .transition-box {
    position: fixed;
    right: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .el-zoom-in-top {
    position: fixed;
    width: 80%;
    height: 100%;
    margin: 0 auto;
    background-color: #fff;
    top: 0;
    right: 0;
    z-index: 10;
  }
  .mb_nav_li {
    margin: 60px auto 0;
  }
  .mb_nav_li li {
    // margin-top:20px;
    padding: 20px 15px;
    border-bottom: 1px solid #ddd;
  }

  .close {
    float: right;
    // padding: 10px;
    margin-top: 25px;
    margin-right: 25px;
    .iconfont {
      font-size: 22px;
    }
  }
  .mt_btn {
    margin-top: 30px !important;
  }
}
</style>
